<template>
  <div class="e-lnvoice-container">
    <div class="ele-amount">
      <p class="ele-amount-title">发票金额：</p>
      <p class="ele-amount-num">
        <span class="price">{{order.payment}}</span>元
      </p>
    </div>
    <div class="ele-detail">
      <div class="item">
        <span class="label">发票类型：</span>
        <span v-if="invoice.is_electronic==1">电子</span>
        <span v-if="invoice.type==1">普通发票</span>
        <span v-else>增值发票</span>
      </div>
      <div class="item">
        <span class="label">发票抬头：</span>
        <span>{{invoice.invoice_header}}</span>
      </div>
      <div class="item" v-if="(invoice.invoice_type==2 || invoice.type==2) && invoice.invoice_no">
        <span class="label">企业税号：</span>
        <span>{{invoice.invoice_no}}</span>
      </div>
      <div v-if="invoice.type==2">
        <div class="item">
          <span class="label">单位地址：</span>
          <span>{{invoice.company_address}}</span>
        </div>
        <div class="item">
          <span class="label">单位电话：</span>
          <span>{{invoice.company_phone}}</span>
        </div>
        <div class="item">
          <span class="label">开户银行：</span>
          <span>{{invoice.open_bank}}</span>
        </div>
        <div class="item">
          <span class="label">银行账户：</span>
          <span>{{invoice.bank_account}}</span>
        </div>
      </div>
      <div class="item" v-if="invoice.is_electronic==1">
        <span class="label">发票状态：</span>
        <span v-if="invoice.electronic_status!=2">
          <span v-if="invoice.user_auth==1">开票中</span>
          <span v-else>未申请</span>
        </span>
        <span v-else>已开票</span>
      </div>
    </div>
    <section class="actions" v-if="invoice.is_electronic==1">

      <a :href="authUrl?authUrl:'javascript:;'" class="mbtn btn-big add-wx-cart" v-if="elect_channel!=1">
        <span v-if="invoice.electronic_status!=2">
          <span v-if="invoice.user_auth==1">开票中</span>
          <span v-else>申请开票</span>
        </span>
        <span v-else>已开票</span>
      </a>
      <p class="info" v-if="invoice.electronic_status==2 && invoice.user_auth">已领取到微信卡包，可到微信【我】-【卡包】中查看</p>  

      <div v-if="invoice.electronic_pdf_url">
        <a :href="invoice.electronic_pdf_url" class="mbtn btn-big">下载电子发票(PDF)</a>
        <p class="info">下载后请用PDF Reader 阅读器打开</p>
      </div>
    </section>
  </div>
</template>

<script>
import { geteInvoice } from '@/api/order/order.js'
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {},
  data() {
    return {
      order: {
        // payment: '5555'
      },
      elect_channel: '0',
      invoice: {},
      authUrl: ''
    }
  },
  methods: {
    init() {
      const query = this.$route.query
      const queryId = query.id || ''
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const params = {
        id: queryId
      }
      geteInvoice(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.order = resData.order
          this.elect_channel = resData.elect_channel
          this.invoice = resData.invoice
          this.authUrl = resData.authUrl
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.init()
  }
  /* watch: {
      curType(val) {
        this.navData.curType = val
      }
    } */
})
</script>

<style lang="scss">
.e-lnvoice-container{
  margin:20px 20px 60px;
  border-radius:20px;
  background: #fff;
}
.ele-amount {
  padding: 30px;
  font-size: 28px;
  border-bottom: 2px solid #eaeaea;
  .ele-amount-title {
    line-height: 60px;
  }
  .ele-amount-num {
    text-align: right;
    margin-right: 40px;
    .price {
      line-height: 100px;
      font-size: 64px;
      color: #ff0000;
    }
  }
}

.ele-detail {
  padding: 40px 0;
  font-size: 28px;
  .item {
    line-height: 60px;
    .label {
      display: inline-block;
      width: 30%;
      text-align: right;
    }
  }
}
.actions {
  padding: 10px 30px;
  .btn-big {
    display: block;
    width: 100%;
    font-size: 32px;
    height: 80px;
    line-height: 80px;
    border-radius:80px;
    text-align:center;
    background: #ff8f09;
    color: #fff;
  }
  .info {
    padding: 12px 0;
    line-height: 36px;
    color: #ff8f09;
    text-align: center;
  }
}
</style>